<script setup lang="ts">
import myTopic from "@/composables/myTopic.ts";
import errorsStore from "@/piniaStore/errorsStore.ts";
const router = useRouter();
const route = useRoute();
const t_id = route.params?.t_id;
const {topicDetail, editTopic,getTopicDetail, getCats, cats} = myTopic();
await getTopicDetail(t_id);
await getCats();
const edit = async () => {
  await editTopic(topicDetail.value);
  await router.push({name: 'topic.index'});
}
const clearError = (name: string) => {
  errorsStore().clearError(name);
}
</script>

<template>
  <main class="addTopic" v-if="topicDetail">
    <el-card shadow="hover">
      <template #header>
        <div class="title">
          <icon-editoer-picture theme="outline" size="20"/>&nbsp;
          <span>编辑帖子</span>
        </div>
      </template>
      <el-form label-width="120px" v-if="cats">
        <el-form-item label="选择帖子大类">
          <el-select v-model="topicDetail.cat_id"
                     placeholder="请选择帖子大类"

                     @change="clearError('cat_id')"
          >
            <el-option :label="cat.title"
                       :value="cat.id"
                       :selected="cat.id == topicDetail.cat.id"
                       v-for="(cat,index) in cats"
                       :key="index"
            />
          </el-select>
          <my-error name="cat_id"/>
        </el-form-item>
        <el-form-item label="帖子标题">
          <el-input v-model="topicDetail.title" placeholder="请输入帖子标题" @focus="clearError('title')"/>
          <my-error name="title"/>
        </el-form-item>
        <el-form-item label="帖子内容">
          <markdown-editor v-model="topicDetail.content" />
          <my-error name="content"/>
        </el-form-item>
        <el-form-item label="帖子排序">
          <el-input v-model="topicDetail.sort" placeholder="请输入帖子排序" @focus="clearError('sort')"/>
          <my-error name="sort"/>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="edit">确认修改</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </main>
</template>

<style lang="scss" scoped>
main.addTopic {
  @apply min-h-screen p-3;
  div.title {
    @apply flex items-center text-slate-600;
  }
}
</style>